<template>
  <!--  发货区域，支持选择快递-->
  <j-modal
    switchFullscreen
    :width="800"
    :title="title"
    :visible="visible"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
  >
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button @click="handleOk" type="primary" v-if="!disableSubmit">确认</a-button>
    </template>
    <a-form :form="form">
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="物料编号"
            >
            <a-input placeholder="请输入物料编号" v-decorator="['materialCode', validatorRules.materialCode]"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="物料名称"
            >
            <a-input placeholder="请输入物料名称" v-decorator="['materialName', validatorRules.materialName]"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="物料规格"
            >
            <a-input placeholder="请输入规格" v-decorator="['model', validatorRules.model]"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="物料条码"
            >
            <a-input placeholder="请输入物料条码" v-decorator="['barCode', validatorRules.model]"/>
          </a-form-item>
        </a-col>


        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="基本单位"

          >
            <cn-dict-select-tag :options="{value:'dictDataDesc',label:'dictDataDesc'}" :triggerChange="true"
                               dictCode="cpbasic_unit"
                               :disabled="disableSubmit" v-decorator.trim="['meins']"
                               @change="(r,v)=>{ changeJselect('meinst',v)}"
                               placeholder="请选择基本单位" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="报价"
            >
            <a-input-number :min="0" placeholder="请输入报价" v-decorator="['price', validatorRules.model]" style="width:100%"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <proChose ref="prochoose" @okbro="okbropro"></proChose>
  </j-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import proChose from '@comp/cn-components/ProChose'
import { pick } from 'lodash'

export default {
  name: 'materialModal',
  components: {
    proChose
  },
  data() {
    return {
      disableSubmit: false,
      disableSubmits: false,
      title: '',
      confirmLoading: false,
      forms:{
        materialCode:'',
        materialName:'',
        model:'',
      },
      form: this.$form.createForm(this),
      model: {},
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 }
      },
      url: {
        // kuaidi: window._CONFIG['domianOrderURL'] + '/cnDictionaryTypeController/getDictionaryTypeList'
        sendOrder: window._CONFIG['domianURL'] + '/material/saveOrUpdate'
      },
      validatorRules: {
        matnr: {
          rules: [
            { required: true, message: '' }
          ]
        },

        maktx: {
          rules: [
            { required: true, message: '' }
          ]
        },
        materialCode:{
          rules: [
            { required: true, message: '' }
          ]
        },
        materialName:{
          rules: [
            { required: true, message: '' }
          ]
        },
        model: {
          rules: [
            { required: true, message: '' }
          ]
        },
        meins: {
          rules: [
            { required: true, message: '' }
          ]
        },
        vrkme: {
          rules: [
            { required: true, message: '' }
          ]
        },
        umren: {
          rules: [
            { required: true, message: '' }
          ]
        },
        umrez: {
          rules: [
            { required: true, message: '' }
          ]
        },
      },
      modal: undefined
    }
  },
  methods: {
    priceCh(e){
      console.log(e.target.value)
      let num = e.target.value
      if(num < 0){
        this.$nextTick(()=>{
          this.form.setFieldsValue({
            price:0
          })
        })
      }
    },
    custSearch(status) {
      let formconfig = [
        {
          key: 'custCode',
          label: '经销商编号'
        },
        {
          key: 'custName',
          label: '经销商名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '经销商编号',
            align: 'center',
            dataIndex: 'custCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '经销商名称',
            align: 'center',
            dataIndex: 'custName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/customerController/getPageList',
        multiple: false,
        columW: 8
      }
      this.name = '经销商'
      this.$refs.prochoose.edit(formconfig, tableconfig, status)
    },
    productSearch(status) {
      let formconfig = [
        {
          key: 'productCode',
          label: '商品编号'
        },
        {
          key: 'productName',
          label: '商品名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '商品编号',
            align: 'center',
            dataIndex: 'productCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '商品名称',
            align: 'center',
            dataIndex: 'productName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/cnProductController/getProductListByCust',
        multiple: false,
        columW: 8
      }
      this.name = '商品'
      this.$refs.prochoose.edit(formconfig, tableconfig, status)
    },
    okbropro(record, status) {
      let res = record[0]
      if (status == 'product') {
        this.form.setFieldsValue(pick(res, 'productCode', 'productName'))
      } else {
        console.log('999')
        this.form.setFieldsValue(pick(res, 'custCode', 'custName', 'channelCode', 'channelName'))
        console.log(this.form.getFieldValue('channelName'))
      }

    },
    add(record, status) {
      this.edit(record, status)
    },
    edit(scord) {
      this.form.resetFields()
      this.modal = undefined
      this.visible = true
      if (typeof scord !== 'undefined') {
        this.disableSubmits = true
        this.modal = Object.assign({}, scord)
        this.$nextTick(() => {
          this.form.setFieldsValue({ ...this.modal })
        })
      }
    },
    changeJselect(name,value){
      this.model[name]=value.dictDataDesc
    },
    handleOk() {
      let _vm = this
      this.form.validateFields((err, values) => {
         console.log(values)
        if (!err) {
          this.confirmLoading = true
          this.modal == undefined ? console.log('新增提交') : values.id = this.modal.id
          let formData = Object.assign(this.model,values)
          postAction(this.url.sendOrder, formData).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.$emit('ok')
              console.log('成功')
              this.close();
            } else {
              this.$message.warning(res.message);
            }
          }).finally(() => {
            this.confirmLoading = false;
            this.close();
          })
        }
      })

    },
    handleCancel() {
      this.visible = false
      this.confirmLoading = false
    },
    close() {
      this.handleCancel()
    }
  }

}
</script>

<style scoped>

</style>